<template>
    <view class="container">
            <view class="top" :style="{ paddingTop: barHeight, height: isOpenAgentActivity == '1'? '540rpx':'400rpx'}">
                <view class="top-center">
                    <view class="user-info">
                        <view class="avatar">
                            <image
                                :src="avatar? avatar:'https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/user_imag.png'"
                                style="width: 100%;height: 100%;"
                            ></image>
                        </view>
                        <view class="info-block">
                            <view class="info-name" v-if="userId">{{ nickName }}</view>
                            <view class="info-login" v-else >
                                <u-button
                                    text="立即登录"
                                    openType="getUserInfo"
                                    @click="login()"
                                    size="small"
                                    :throttleTime="1500"
                                ></u-button>
                            </view>
                            <view class="info-point" @click="navigateTo('pages/point/index')" v-if="userId">
                                <u-icon
                                    name="/static/point.png"
                                    width="30rpx"
                                    height="30rpx"
                                ></u-icon>
                                <text class="t-1">积分</text>
                                <text class="t-2">{{ userPoint?userPoint:0.00 }}</text>
                            </view>
                            <view class="notice">
                                <u-icon
                                    size="50rpx"
                                    name="https://img.ionepin.com/5d4ce721d8c8f9867fe32e287317a8a9345440bd.png"
                                    @click="navigateTo('pages/share/agent')"
                                ></u-icon>
                            </view>
                            <view class="sets">
                                <u-icon
                                    size="50rpx"
                                    name="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/sets.png"
                                    @click="navigateTo('pages/setting/index')"
                                ></u-icon>
                            </view>
                            <view  @click="navigateTo('pages/activityList/index')" class="activity">抽奖活动进行中></view>
                        </view>
                    </view>
                    <user-proxy v-if="isOpenAgentActivity == '1'" ></user-proxy>
                </view>
                <view class="tabs">
                    <u-tabs
                        :list="tabs"
                        :scrollable="false"
                        lineWidth="50rpx"
                        lineHeight="4rpx"
                        lineColor="#000000"
                        itemStyle="flex:1;height: 100rpx"
                        :activeStyle="{
                            color: '#000000',
                            fontSize: '30rpx'
                        }"
                        :inactiveStyle="{
                            color: '#000000',
                            fontSize: '30rpx'
                        }"
                        @click="tabClick"
                    ></u-tabs>
                </view>
            </view>
            <view class="tabs-content" v-show="tabAction=='order'">
                <view class="status-tag" v-if="userId">
                    <block v-for="(item, k) in orderTag" :key="k">
                        <view class="tag-info" v-if="orderQuery.state == item.type">
                            <u-tag
                                @click="action(item.type)"
                                :text="item.name"
                                borderColor="#000000"
                                bgColor="#000000"
                                :plain="false"
                                size="mini"
                            ></u-tag>
                        </view>
                        <view class="tag-info" v-else>
                            <u-tag
                                @click="action(item.type)"
                                :text="item.name"
                                color="#000000"
                                borderColor="#B6B6B6"
                                plain
                                size="mini"
                            ></u-tag>
                        </view>
                    </block>
                </view>
                <view class="context-list" v-if="orderList.length > 0">
                    <view class="list-item" v-for="(item, k) in orderList" :key="k" @click="navigateTo('pages/orderInfo/index', {id: item.id, type: item.type})">
                        <order-union-view :order='item' @orderPay="showPaySheet"></order-union-view>
                    </view>
                </view>
                <view class="context-list" v-else>
                    <u-empty
                        mode="order"
                        icon="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_empty_order.png"
                        width="590rpx"
                        height="460rpx"
                        marginTop="100rpx"
                        text="还没有订单哦，去首页看看吧"
                        textSize="28rpx"
                        textColor="#999999"
                    >
                    </u-empty>
                </view>
            </view>
            <view class="tabs-content" v-show="tabAction=='collection'">
                <view class="status-tag">
                    <!--view class="tag-info">
                        <u-tag
                            text="默认分类"
                            borderColor="#B6B6B6"
                            bgColor="#000000"
                            :plain="false"
                            size="mini"
                        ></u-tag>
                    </view>
                    <view class="tag-info">
                        <u-tag
                            text="漫威"
                            color="#000000"
                            borderColor="#B6B6B6"
                            plain
                            size="mini"
                        ></u-tag>
                    </view-->
                    <!---view class="tag-info">
                        <u-tag
                            text="迪士尼"
                            color="#000000"
                            borderColor="#B6B6B6"
                            plain
                            size="mini"
                        ></u-tag>
                    </view>
                    <view class="total">
                        <u--text
                            :text="'('+nftTotal+')'"
                            size="24rpx"
                            color="#999999"
                        ></u--text>
                    </view--->
                </view>
                <view class="context-list" v-if="nftList.length > 0">
                    <u-row
                        customStyle="flex-wrap: wrap;"
                        gutter="15"
                    >
                        <u-col
                            span="4"
                            v-for="(item, index) in nftList"
                            :key="index"
                            @click="navigateTo('pages/extract/index', {id: item.id})"
                        >
                            <collect-view :nft="item.nft" :balance="item.balance"></collect-view>
                        </u-col>
                    </u-row>
                </view>
                <view class="context-list" v-else>
                    <u-empty
                        mode="order"
                        icon="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_empty_order.png"
                        width="590rpx"
                        height="460rpx"
                        marginTop="100rpx"
                        text="还没有藏品哦，去首页看看吧"
                        textSize="28rpx"
                        textColor="#999999"
                    >
                    </u-empty>
                </view>
            </view>
        <view class="tabs-content" v-show="tabAction=='coupon'">
            <view class="coupon-ul">
                <view class="coupon-li" v-for="coupon in couponList" :key="coupon.id">
                    <view class="coupon-left">
                        <view class="coupon-left-title">{{ coupon.ticket.description }}</view>
                        <view class="coupon-left-time">有效时间：{{ coupon.ticket.beginAt }}-{{ coupon.ticket.endAt }}</view>
                    </view>
                    <view class="coupon-right">
                        <view class="coupon-right-zk">
                            <text>{{ coupon.ticket.discount * 10 }}</text>
                            <text>折</text>
                        </view>
                        <view class="coupon-right-navigate" @click="goHome()">去使用</view>
                    </view>
                </view>
            </view>
        </view>
        <new-people></new-people>
        <pay-platform
            :sheetShow="sheetShow"
            :orderId="sheetData.orderId"
            :payPrice="sheetData.payPrice"
            :orderType="sheetData.orderType"
            @pay="payCallback"
            @close="closeSheet"
            v-if="sheetShow"
        ></pay-platform>
    </view>
</template>

<script>
import OrderView from "@/components/OrderView"
import OrderUnionView from "@/components/OrderUnionView"
import CollectView from "@/components/CollectView"
import PayPlatform from "@/components/PayPlatform"
import { getNftPage, getUserTicketPage, getOrderUnionPage } from "@/config/api"
import NewPeople from "@/components/NewPeople"
import UserProxy from "@/components/UserProxy"
export default {
    components: {
        OrderView,
        CollectView,
        NewPeople,
        OrderUnionView,
        PayPlatform,
        UserProxy
    },
    data() {
        return {
            tabAction: "order",
            tabs: [
                {
                    name: "订单",
                    type: "order"
                },
                {
                    name: "藏品",
                    type: "collection"
                },
                {
                    name: "优惠券",
                    type: "coupon"
                }
            ],
            barHeight: "0rpx",
            orderQuery: {
                page: 1,
                list_rows: 10,
                state: "all"
            },
            orderList: [],
            orderTotal: 0,
            orderTag: [
                {
                    name: "全部",
                    type: "all"
                },
                {
                    name: "待开奖",
                    type: "wait"
                },
                {
                    name: "待付款",
                    type: "wait_pay"
                },
                {
                    name: "待发货",
                    type: "ship"
                },
                {
                    name: "已发货",
                    type: "receipt"
                },
                {
                    name: "已完成",
                    type: "complete"
                }
            ],
            nftQuery: {
                page: 1,
                list_rows: 10
            },
            nftTotal: 0,
            nftList: [],
            couponList: [],
            couponShow: true,
            sheetShow: false,
            sheetData: {
                orderId: null,
                payPrice: null,
                orderType: null
            },
        }
    },
    onLoad() {
        const res = uni.getSystemInfoSync()
        var height = res.statusBarHeight
        //this.barHeight = this.$store.getters.statusBarHeight + "rpx"
        this.barHeight = height + "rpx"
    },
    onShow() {
        this.orderQuery.page = 1
        this.getOrderData()
    },
    async onPullDownRefresh() {
        if(this.$store.getters.userId) {
            this.orderQuery.page = 1
            await this.getOrderData()
            this.nftQuery.page = 1
            await this.getNftData()
            await this.$store.dispatch("user/info")
            uni.stopPullDownRefresh()
        } else {
            setTimeout(function () {
                uni.stopPullDownRefresh()
            }, 1000)
        }
    },
    onReachBottom() {
        if (this.tabAction == 'order') {
            if (this.orderTotal > this.orderList.length) {
                this.orderQuery.page += 1
                this.getOrderData(true)
            }
        } else if(this.tabAction == 'collection') {
            if (this.nftTotal > this.nftList.length) {
                this.nftQuery.page += 1
                this.getNftData(true)
            }
        }
    },
    computed: {
        nickName() {
            return this.$store.getters.nickName
        },
        avatar() {
            return this.$store.getters.avatar
        },
        userId() {
            return this.$store.getters.userId
        },
        userPoint() {
            return this.$store.getters.userPoint
        },
        noticeCount() {
            return this.$store.getters.noticeCount
        },
        activityId() {
            return this.$store.getters.currentActivityId
        },
        isOpenAgentActivity() {
            return this.$store.getters.isOpenAgentActivity
        }
    },
    methods: {
        login() {
            uni.$u.route('pages/login/index')
        },
        scrolltolower() {

        },
        tabClick(item) {
            this.tabAction = item.type
            if (this.tabAction === 'collection' && this.nftList.length <= 0) {
                this.getNftData()
            } else if (this.tabAction === 'coupon' && this.couponList.length <= 0) {
                this.getCouponData()
            }
        },
        navigateTo(path, params={}) {
            uni.$u.route({
				url: path,
				params
			})
        },
        async getOrderData(more=false) {
            const res = await getOrderUnionPage(this.orderQuery)
            if (more) {
                this.orderList = [...this.orderList, ...res.items]
            } else {
                this.orderList = res.items
            }
            this.orderTotal = res.total
        },
        action(type) {
            console.log(385,type);
            this.orderQuery.state = type
            this.orderQuery.page = 1
            this.getOrderData()
        },
        async getNftData(more=false) {
            const res = await getNftPage(this.nftQuery)
            if (more) {
                this.nftList = [...this.nftList, ...res.items]
            } else {
                this.nftList = res.items
            }
            this.nftTotal = res.total
        },
        async getCouponData() {
            this.couponList = await getUserTicketPage()
        },
        goHome() {
            uni.$u.route({
                url: "pages/index/index",
                type: "switchTab"
            })
        },
        payCallback(res) {
            this.sheetShow = false
            if (res) {
                if (res.orderType == 'grab') {
                    var params = {
                        grabId: res.id
                    }
                } else if (res.orderType == 'order') {
                    var params = {
                        orderId: res.id
                    }
                }
                this.navigateTo("pages/orderComplete/index", params)
            }
        },
        showPaySheet(res) {
            this.sheetData = {
                orderId: res.id,
                payPrice: res.price,
                orderType: res.type
            }
            this.sheetShow = true
        },
        closeSheet() {
            this.sheetShow = false
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        .top {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            width: 100%;
            //height: 540rpx;
            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/my_backgroud.png) no-repeat center;
            background-size: 100% 100%;
            position: relative;
            .top-center {
                width: 100%;
            }
            .user-info {
                padding: 20rpx;
                display: flex;
                margin-bottom: 40rpx;
                .avatar {
                    width: 128rpx;
                    height: 128rpx;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .info-block {
                    flex: auto;
                    margin-left: 24rpx;
                    position: relative;
                    .info-name {
                        font-size: 40rpx;
                        font-family: Helvetica-Bold, Helvetica;
                        font-weight: bold;
                        color: #000000;
                        margin-top: 27rpx;
                    }
                    .info-login {
                        width: 150rpx;
                        margin-top: 20px;

                    }
                    .notice {
                        position: absolute;
                        top:27rpx;
                        right: 120rpx;
                        .badge {
                            position: relative;
                        }
                    }
                    .sets {
                        position: absolute;
                        top: 27rpx;
                        right: 40rpx;
                    }
                    .info-point {
                        //box-sizing: border-box;
                        background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/tag_bg.png) no-repeat center;
                        background-size: 100%;
                        width: 160rpx;
                        height: 38rpx;
                        margin-top: 16rpx;
                        display: flex;
                        align-items: center;
                        padding: 5rpx 10rpx;
                        //justify-content: center;
                        .t-1 {
                            font-size: 22rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            line-height: 1.5;
                            margin: 0 5rpx;
                        }
                        .t-2 {
                            font-size: 24rpx;
                            font-family: DINAlternate-Bold, DINAlternate;
                            font-weight: bold;
                            color: #353CE7;
                            line-height: 38rpx;
                        }
                    }
                    .activity {
                        background: url("https://img.ionepin.com/dfe9c489a8e000a075b4b2978c87d715c0f18adc.png") no-repeat;
                        background-size: 100% 100%;
                        width: 227rpx;
                        height: 65rpx;
                        position: absolute;
                        right: -20rpx;
                        bottom: -20rpx;
                        font-size: 24rpx;
                        font-family: PingFang-SC-Bold, PingFang-SC;
                        font-weight: bold;
                        color: #FFE18D;
                        line-height: 65rpx;
                        text-align: right;
                        padding-right: 7rpx;
                    }
                }
            }
            .tabs {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                box-sizing: border-box;
                padding: 0 100rpx;
                border-bottom: 1rpx solid #D8D8D8;
            }
        }
        .tabs-content {
            padding: 40rpx 15rpx 0 15rpx;
            .status-tag {
                display: flex;
                position: relative;
                margin-bottom: 40rpx;
                .tag-info {
                    height: 44rpx;
                    margin-right: 20rpx;
                }
                .total {
                    position: absolute;
                    right: 0;
                }
            }
            .context-list {
                .list-item {
                    margin-bottom: 50rpx;
                }
                .collect-item {
                    display: flex;
                }
            }
            .coupon-ul {
                .coupon-li {
                    background: url("https://img.ionepin.com/9af4c584a39415c57ee01f1f7c92ffef5ec92e5c.png") no-repeat;
                    background-size: 100% 100%;
                    width: 700rpx;
                    height: 160rpx;
                    margin-bottom: 26rpx;
                    display: flex;
                    justify-content: space-between;
                    .coupon-left {
                        padding-left: 26rpx;
                        padding-top: 35rpx;
                        .coupon-left-title {
                            font-size: 26rpx;
                            font-family: PingFang-SC-Bold, PingFang-SC;
                            font-weight: bold;
                            color: #000000;
                        }
                        .coupon-left-time {
                            height: 36rpx;
                            padding: 0 15rpx;
                            border-radius: 20rpx;
                            border: 1rpx solid #E02020;
                            font-size: 20rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #E02020;
                            line-height: 36rpx;
                            margin-top: 16rpx;
                        }
                    }
                    .coupon-right {
                        margin-right: 45rpx;
                        .coupon-right-zk {
                            color: #FFFFFF;
                            margin-top: 20rpx;
                            text-align: center;
                            text {
                                &:nth-child(1) {
                                    font-size: 68rpx;
                                    font-family: PingFang-SC-Bold, PingFang-SC;
                                    font-weight: bold;
                                }
                                &:nth-child(2) {
                                    font-size: 30rpx;
                                }
                            }
                        }
                        .coupon-right-navigate {
                            width: 120rpx;
                            height: 32rpx;
                            background: #FFFFFF;
                            border-radius: 20rpx;
                            text-align: center;
                            font-size: 20rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #E02020;
                        }
                    }
                }
            }
        }
        .bottom {
			position: fixed;
			bottom: 0;
            left: 0;
			width: 100%;
		}
        .alipay {
            width: 100%;
            height: 500rpx;
        }
    }
</style>
